<template>
  <div class="hots-wrapper" v-loading="loading">
    <!-- 头部 -->
    <Header></Header>
    <div class="hot-content">
      <!-- 标签 -->
      <Tags @sendTagsHandler="getTagsHandler"></Tags>
      <!-- 导航 -->
      <SubNav :navLists="navLists" @sendNavHandler="getNavHandler"></SubNav>
      <!-- 商品列表 -->
      <div class="hot-graphic-lists" v-if="lists.length>0">
        <HotSystemList  v-for="(item,index) in lists" :key="item.id" :item="item" :index="index" @sendJoinCollect="getJoinCollect"></HotSystemList>
      </div>
      <div class="graphic-no-data" v-else>
        <NoData gradient="blue"></NoData>
      </div>
      <!-- 分页组件 -->
      <div class="pagination" v-if="total > 40">
        <el-pagination
          background
          :current-page = "pageNum"
          @current-change="changeCurrentPage"
          :page-sizes="[40,80]"
          @size-change="changeCurrentPageSize"
          :total = "total"
          layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
        <div class="pageSearch" @click="pageSearch">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
  import Header from '../components/hotSystem/Header'
  import Tags from '../components/hotSystem/Tags'
  import SubNav from '../components/hotSystem/SubNav'
  import HotSystemList from '../components/hotSystem/HotSystemList'
  import NoData from '../components/noData'
  export default {
    async fetch({store}){
      await store.commit('setInterIndex',10)
    },
    layout: 'internalouts',
    components:{
      Header,
      Tags,
      SubNav,
      HotSystemList,
      NoData,
    },
    data () {
      return {
        //nav导航
        navLists:[],
        //图文列表
        lists:[],
        //第一页
        pageNum:1, 
        //每页的条数
        pageSize:40, 
        //总条数
        total:0,
        //页面加载效果 
        loading:false,
        //1新品还是 0非新品
        isNew: -2,
        //分类名字，默认为全部
        category:"",
        //用户id
        userId:1033,
      }
    },
    mounted() {
      //掉用初始化接口
      this.hotGoods();
      // this.HotJoinCollect();
    },
    methods:{
      //新品和非新品
      getTagsHandler(e){
        this.isNew = e;
        console.log('isNew',e)
        this.hotGoods();
      },
      //改变当前页数
      changeCurrentPage(page){ 
        this.pageNum = page; //赋值给当前页
        this.hotGoods(); //调用商品列表接口
        this.$scrollTo()
      },
      //改变条数
      changeCurrentPageSize(pageSize){ 
        this.pageNum = 1; //重新请求第一页
        this.pageSize = pageSize;  //设置条数
        this.hotGoods(); //调用商品列表接口
        this.$scrollTo()
      },
       //点击确定按钮时候调用分页事件
      pageSearch(){
        this.hotGoods();//调用接口interface
        this.$scrollTo();
      },
      //分类事件
      getNavHandler(e) {
        this.category = e;
        console.log('category',e)
        this.hotGoods(); 
      },
      // 点击加入收藏,调用初始化接口
      getJoinCollect() {
        this.hotGoods();
      },
      // 爆品商品信息接口
      hotGoods() {
        this.loading = true;
        let params ={
          // 页数
          pageNum:this.pageNum,
          // 每页的条数
          pageSize:this.pageSize,
          // 是否是新品,1是新品, 0是全天销量 -2综合销量榜
          isNew:this.isNew,
          // 分类名称
          category:this.category,
        }
        this.$axios.$post('hotGoods',params).then(res => {
          this.loading = false;
          if(res.status === 200){
          //  console.log(res)
          console.log(res.obj.infos.list)
            res.obj.infos.list.forEach(item=>{
              let obj = item;
              this.$set(obj,"isFlag",false)
              this.$set(obj,"isJoinCollect",false)
            })
            this.lists = res.obj.infos.list;
            this.total = res.obj.infos.total;
            res.obj.category.unshift("全部")
            this.navLists = res.obj.category;
            console.log('navLists',this.navLists)
            this.loading = false;
          }else{
            this.$message.warning(res.msg);
          }
        })
        .catch(error => {
          // this.$message.warning('请求失败');
          this.loading = false;
        })
      },
       //用户收藏
      HotJoinCollect(){
        this.loading = true;
        let params ={
          id:132742
        }
        this.$axios.$post('HotJoinCollect',params).then(res => {
          this.loading = false
          if(res.status === 200 ){
            console.log(res)
          }else{
            this.$message.warning(res.msg);
          }
        })
        .catch(error => {
          this.$message.warning('请求失败');
          this.loading = false;
        })
      },
    }
  }
</script>

<style scoped>
  .hots-wrapper{
    background-color: #151923;
    min-width:1200px;
  }
  /* 内容区 */
  .hot-content{
    width:1440px;
    margin:0 auto;
    overflow:hidden;
    min-height:100vh;
  }
  @media screen and (max-width:1440px){
    .hot-content{
      width:1200px;
    }
  }
  /* 图文列表 */
  .hot-graphic-lists{
    display:flex;
    flex-wrap:wrap;
    width:1470px;
    padding-bottom:30px;
  }
  @media screen and (max-width:1440px){
    .hot-graphic-lists{
    width:1230px;
    }
  }
  /* 分页样式 */
  .pagination{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:0 0 50px 0;
  }
  .pagination .pageSearch{
    width:60px;
    height:28px;
    line-height:28px;
    text-align:center;
    border-radius:15px;
    background-image:linear-gradient(to right, #0099ff,#0099ff,#05d5fc,#07edfb);
    color:#ffffff;
    font-size:14px;
    cursor:pointer;
    margin-left:10px;
    user-select:none;
    transition:all .2s ease;
  }
  .pagination .pageSearch:hover{
    background-image:linear-gradient(to left, #0099ff,#0099ff,#05d5fc,#07edfb);
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: none;
    background-image:linear-gradient(to right, #0099ff,#0099ff,#05d5fc,#07edfb);
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover{
    background-image:linear-gradient(to left, #0099ff,#0099ff,#05d5fc,#07edfb);
  }
  /* 暂无数据 */
  .graphic-no-data{
    width:1440px;
  }
  @media screen and (max-width:1440px){
    .graphic-no-data{
      width:1200px;
    }
  }
</style>
